<template>
    <div class="processes">
        <el-form :inline="true" :model="search">
            <el-row :span="24">
                <el-col :span="6">
                    <el-form-item label="工作流实例ID">
                        <el-input v-model="search.processInstanceId" placeholder="请输入工作流实例ID"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="流程定义ID">
                        <el-input v-model="search.processDefinitionKey" placeholder="请输流程定义ID"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="流程实例名称">
                        <el-input v-model="search.processInstanceNameLike" placeholder="请输入流程实例名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="业务key">
                        <el-input v-model="search.processInstanceBusinessKey" placeholder="请输入业务key"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :span="24" style="margin-bottom:10px">
                <el-col :span="10">
                    <el-form-item label="流程开始时间区间">
                        <el-date-picker v-model="beginTimeRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button plain @click="onReset">清空</el-button>
                </el-col>
            </el-row>

        </el-form>
        <el-table ref="multipleTable" :data="tableData" border stripe style="width: 100%">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="id" label="主键">
            </el-table-column>
            <el-table-column prop="processDefinitionId" label="工作流定义id">
            </el-table-column>
            <el-table-column prop="processDefinitionName" label="工作流定义名称">
            </el-table-column>
            <el-table-column prop="processDefinitionKey" label="工作流定义key">
            </el-table-column>
            <el-table-column prop="processDefinitionVersion" label="工作流定义版本">
            </el-table-column>
            <el-table-column prop="deploymentId" label="部署id">
            </el-table-column>
            <el-table-column prop="businessKey" label="业务key">
            </el-table-column>
            <el-table-column prop="suspensionState_text" label="是否暂停">
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column prop="startTime" label="流程开启时间">
            </el-table-column>
            <el-table-column prop="startUserId" label="流程开启用户">
            </el-table-column>
            <el-table-column label="操作" width="240px">
                <template slot-scope="scope" v-if="scope.row.id != 1">
                    <el-button type="primary" plain size="mini" v-if="hasPrivilege('processInstance:delete')"
                        @click="handleDelete(scope.row)">删除
                    </el-button>
                    <el-button type="primary" plain size="mini"
                        v-if="hasPrivilege('processInstance:suspend') && scope.row.suspensionState == 1"
                        @click="handleSuspend(scope.row, true)"> 暂停
                    </el-button>
                    <el-button type="primary" plain size="mini"
                        v-else-if="hasPrivilege('processInstance:resume') && scope.row.suspensionState == 2"
                        @click="handleSuspend(scope.row, false)"> 恢复
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 200]" :page-size="search.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { workflowApi, commonApi } from "../../api/api";
import tables from "@/utils/tables";
import form from "@/utils/form";

export default {
    mixins: [tables, form],
    data() {
        return {
            beginTimeRange: null,
            tableData: [],
            total: 0,
            search: {
                processInstanceId: null,
                processDefinitionKey: null,
                processInstanceNameLike: null,
                processInstanceBusinessKey: null,
                startedAfter: null,
                startedBefore: null,
                size: 10,
                current: 1
            },
        }
    },
    watch: {
        beginTimeRange(newVal) {
            this.search.startedAfter = newVal == null ? null : this.format(newVal[0])
            this.search.startedBefore = newVal == null ? null : this.format(newVal[1])
        }
    },
    created() {
        this.onSubmit();
    },
    methods: {
        onSubmit() {
            workflowApi.processesInstancePage(this.search).then(res => {
                this.loadPage(res, ['suspensionState'])
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
        },
        handleDelete(row) {
            this.confirmOperation('此操作将永久删除该流程, 是否继续?', this.deleteRequest, row)
        },
        handleSuspend(row, suspend) {
            workflowApi.suspendProcessInstance({ 'processInstanceId': row.id, 'isSuspend': suspend }).then(res => {
                this.onSubmit();
                commonApi.popoverSuccessMessage(res)
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage)
        },
        deleteRequest(row) {
            workflowApi.deleteProcessInstance({ 'processInstanceId': row.id }).then(res => {
                this.onSubmit();
                commonApi.popoverSuccessMessage(res);
            }, commonApi.popoverErrorMessage
            ).catch(commonApi.popoverErrorMessage);
        }
    }
}
</script>

<style lang="scss" scoped>
.processes {
    .block {
        margin: 20px;
        float: right;
    }
}
</style>